<#include "../common/header.htm">
<div class="content-wrapper" style="margin-left: 0px">
    <section class="content">
        <div class="row">
            <el-form ref="form" :model="form">
                <el-form-item label="模板名称">
                    <el-input v-model="form.name" name="formName"></el-input>
                </el-form-item>
                <el-form-item label="标题头">
                    <el-input v-model="form.name" name="formTitle"></el-input>
                </el-form-item>
                <el-form-item label="是否有共同的附加信息">
                    <el-radio-group v-model="form.common">
                        <el-radio label="是" onClick="detailShow()"></el-radio>
                        <el-radio label="否" onClick="detailHide()"></el-radio>
                        <div class="commonDetailInfo">
                            <div class="commDetailInfo">
                                <div class="commDetailInfoLine">
                                    <el-form-item label="第几行" class="comDetailCol">
                                        <el-input v-model="form.name" name="comInfoLine"></el-input>
                                    </el-form-item>
                                </div>
                                <el-button @click="addDomain">新增</el-button>
                                <el-form-item
                                        v-for="(domain, index) in dynamicValidateForm.domains"
                                        :label="'第几行' "
                                        :key="domain.key"
                                        :prop="'domains.' + index + '.value'"

                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                            </div>
                            <div class="comDetailInfoCol" class="comDetailCol">
                                <el-form-item label="第几列" class="comDetailCol">
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item label="正则" class="comDetailCol">
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-button @click="addDetailInfoCol">新增</el-button>
                                <el-form-item
                                        v-for="(infocol, index) in DetailInfoCol.infocol"
                                        :label="'第几列' "
                                        :key="infocol.key"
                                        :prop="'infocol.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-for="(inforeg, index) in DetailInfoCol.inforeg"
                                        :label="'正则' "
                                        :key="inforeg.key"
                                        :prop="'inforeg.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                            </div>
                            <div class="comDetailInfoObj" class="comDetailCol">
                                <el-form-item label="对应的字段名称" class="comDetailCol">
                                    <el-input v-model="form.name" name="formName"></el-input>
                                </el-form-item>
                                <el-form-item label="对应的字段类型" class="comDetailCol">
                                    <el-input v-model="form.name" name="formName"></el-input>
                                </el-form-item>
                                <el-form-item label="对应的字段匹配的正则的位置" class="comDetailCol">
                                    <el-input v-model="form.name" name="formName"></el-input>
                                </el-form-item>
                                <el-button @click="addDetailInfoObj">新增</el-button>
                                <el-form-item
                                        v-for="(infoname, index) in DetailInfoObj.infoname"
                                        :label="'对应的字段名称' "
                                        :key="infoname.key"
                                        :prop="'infocol.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-for="(infotype, index) in DetailInfoObj.infotype"
                                        :label="'对应的字段类型' "
                                        :key="infotype.key"
                                        :prop="'infotype.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-for="(infosite, index) in DetailInfoObj.infosite"
                                        :label="'对应的字段匹配的正则的位置' "
                                        :key="infosite.key"
                                        :prop="'infosite.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否有多个标题头">
                    <el-radio-group v-model="form.title">
                        <el-radio label="是" onClick="titleShow()"></el-radio>
                        <el-radio label="否" onClick="titleHide()"></el-radio>
                        <div class="titleDetailInfo">
                            <div class="comDetailInfoCol" class="comDetailCol">
                                <el-form-item label="第几列" class="comDetailCol">
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item label="正则" class="comDetailCol">
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-button @click="addtitleInfoCol">新增</el-button>
                                <el-form-item
                                        v-for="(tinfocol, index) in titleInfoCol.tinfocol"
                                        :label="'第几列' "
                                        :key="tinfocol.key"
                                        :prop="'tinfocol.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-for="(tinforeg, index) in titleInfoCol.tinforeg"
                                        :label="'正则' "
                                        :key="tinforeg.key"
                                        :prop="'tinforeg.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                            </div>
                            <div class="comDetailInfoObj" class="comDetailCol">
                                <el-form-item label="对应的字段名称" class="comDetailCol">
                                    <el-input v-model="form.name" name="formName"></el-input>
                                </el-form-item>
                                <el-form-item label="对应的字段类型" class="comDetailCol">
                                    <el-input v-model="form.name" name="formName"></el-input>
                                </el-form-item>
                                <el-form-item label="对应的字段匹配的正则的位置" class="comDetailCol">
                                    <el-input v-model="form.name" name="formName"></el-input>
                                </el-form-item>
                                <el-button @click="addTitleInfoObj">新增</el-button>
                                <el-form-item
                                        v-for="(tinfoname, index) in titleInfoObj.tinfoname"
                                        :label="'对应的字段名称' "
                                        :key="tinfoname.key"
                                        :prop="'infocol.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-for="(tinfotype, index) in titleInfoObj.tinfotype"
                                        :label="'对应的字段类型' "
                                        :key="tinfotype.key"
                                        :prop="'tinfotype.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-for="(tinfosite, index) in titleInfoObj.tinfosite"
                                        :label="'对应的字段匹配的正则的位置' "
                                        :key="tinfosite.key"
                                        :prop="'tinfosite.' + index + '.value'"
                                >
                                    <el-input v-model="form.name" name="comInfoReg"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否有结束标志">
                    <el-radio-group v-model="form.endMark">
                        <el-radio label="是" onClick="endMarkShow()"></el-radio>
                        <el-radio label="否" onClick="endMarkHide()"></el-radio>
                    </el-radio-group>
                    <div class="endMarkText">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="是否有多个sheet ">
                    <el-radio-group v-model="form.sheet">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="流入流出标志 ">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="类型一"></el-radio>
                        <el-radio label="类型二"></el-radio>
                        <el-radio label="类型三"></el-radio>
                        <el-radio label="类型四"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="多sheet的详细信息">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>

        </div>
    </section>
</div>
<script id="test" type="text/html">

</script>
<script src="${ctx}/arttemplate/template-web.js"></script>
<script>
    $(function(){
        $(".commonDetailInfo").hide();
        $(".titleDetailInfo").hide();
        $(".endMarkText").hide();
    })
    function detailShow(){
        $(".commonDetailInfo").show();
    }
    function detailHide(){
        $(".commonDetailInfo").hide();
    }
    function titleShow(){
        $(".titleDetailInfo").show();
    }
    function titleHide(){
        $(".titleDetailInfo").hide();
    }
    function endMarkShow(){
        $(".endMarkText").show();
    }
    function endMarkHide(){
        $(".endMarkText").hide();
    }

    let formsubmit=new Vue({
        el:".row",
        data:{
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            dynamicValidateForm: {
                domains: [],
            },
            DetailInfoCol:{
                infocol: [],
                inforeg: [],
            },
            DetailInfoObj:{
                infoname: [],
                infotype: [],
                infosite: [],
            },
            titleInfoCol:{
                tinfocol: [],
                tinforeg: [],
            },
            titleInfoObj:{
                tinfoname: [],
                tinfotype: [],
                tinfosite: [],
            },
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    key: Date.now()
                })
            },
            addDetailInfoCol(){
                this.DetailInfoCol.infocol.push({
                    value: '',
                    key: Date.now()
                })
                this.DetailInfoCol.inforeg.push({
                    value: '',
                    key: Date.now()
                })
            },
            addDetailInfoObj(){
                this.DetailInfoObj.infoname.push({
                    value: '',
                    key: Date.now()
                })
                this.DetailInfoObj.infotype.push({
                    value: '',
                    key: Date.now()
                })
                this.DetailInfoObj.infosite.push({
                    value: '',
                    key: Date.now()
                })
            },
            addtitleInfoCol(){
                this.titleInfoCol.tinfocol.push({
                    value: '',
                    key: Date.now()
                })
                this.titleInfoCol.tinforeg.push({
                    value: '',
                    key: Date.now()
                })
            },
            addTitleInfoObj(){
                this.titleInfoObj.tinfoname.push({
                    value: '',
                    key: Date.now()
                })
                this.titleInfoObj.tinfotype.push({
                    value: '',
                    key: Date.now()
                })
                this.titleInfoObj.tinfosite.push({
                    value: '',
                    key: Date.now()
                })
            },
        }
    })
</script>
<style>
    .el-form-item.comDetailCol {
        display: inline-block;
        margin-right: 30px;
    }
    .el-form-item__content {
        display: inline-block;
    }
    .el-form-item .el-form-item {
        margin-bottom: 20px;
    }
    button.el-button.el-button--primary {
        width: 70px;
        height: 32px;
        line-height: 10px;
    }
    .el-radio-group .el-radio {
        line-height: 36px;
    }
    .commonDetailInfo {
        margin-top: 15px;
    }
    .commDetailInfoLine {
        display: inline-block;
    }
</style>
</body>
</html>